<template>
  <div>
    <div v-for="propConig, configIndex in    formConfig   " :key="configIndex">
      <div class="pondConfig">
        <div class="flex configItem" v-if="propConig['pondKey']">
          <div class="label title">选择鱼塘：</div>
          <div class="select">
            <el-select filterable clearable size="mini" v-model="materialStagingData[propConig['pondKey']]"
              placeholder="请选择">
              <el-option v-for="(   item, index   ) in    fishPondList   " :key="index" :label="item.pondName"
                :value="Number(item.fishPondId) + ''" />
            </el-select>
          </div>
        </div>
        <div class="flex " v-if="propConig['materialKey']">
          <div class="label title">选择饲料：</div>
          <div class="select">
            <el-select filterable clearable size="mini" v-model="materialStagingData[propConig['materialKey']]">
              <el-option v-for="(   item, index   ) in    materialList   " :key="index" :label="item.name"
                :value="Number(item.materialId) + ''" />
            </el-select>
          </div>
        </div>
      </div>
      <div class="module" v-for="   moduleConfig, index in propConig.materialList" :key="index">
        <div class="title">第{{ index + 1 }}餐</div>
        <div class="inputNum">
          <el-input-number size="mini" :min="0"
            v-model="materialStagingData[moduleConfig.inputNumKey]"></el-input-number>
        </div>
        <div class="setTime">
          <el-select filterable clearable size="mini" v-model="materialStagingData[moduleConfig.startHourKey]"
            placeholder="时">
            <el-option v-for="   m, i    in    time24   " :key="i" :label="m.label" :value="m.value" />
          </el-select><span style="padding:0 10px">:</span>
          <el-select filterable clearable size="mini" v-model="materialStagingData[moduleConfig.startMinuteKey]"
            placeholder="分">
            <el-option v-for="   m, i    in    time60   " :key="i" :label="m.label" :value="m.value" />
          </el-select><span style="padding:0 20px">--</span>
          <el-select filterable clearable size="mini" v-model="materialStagingData[moduleConfig.endHourKey]"
            placeholder="时">
            <el-option v-for="   m, i    in    time24   " :key="i" :label="m.label" :value="m.value" />
          </el-select><span style="padding:0 10px">:</span>
          <el-select filterable clearable size="mini" v-model="materialStagingData[moduleConfig.endMinuteKey]"
            placeholder="分">
            <el-option v-for="   m, i    in    time60   " :key="i" :label="m.label" :value="m.value" />
          </el-select>
        </div>
        <div class="switch">
          <el-switch size="mini" v-model="materialStagingData[moduleConfig.switchKey]" active-color="#13ce66"
            inactive-color="#ff4949" active-text="开" inactive-text="关" :active-value="'1'" :inactive-value="'0'">
          </el-switch>
          <el-button style="padding:0 10px" @click="clearItemData(moduleConfig)" type="text">清 除</el-button>
        </div>
      </div>
      <div style="margin: 20px 0;border-top: 1px dashed #cecece; width: 100%;"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "takeFoodConfig",
  props: {
    materialList: {  //物料
      type: Array,
      default: () => []
    },
    fishPondList: { //鱼塘
      type: Array,
      default: () => []
    },
    formConfig: {  //表单配置
      type: Array,
      default: () => []
    },
    formData: { //表单初始化数据
      type: Object,
      default: () => { }
    },
    time60: {
      type: Array,
      default: () => []
    },
    time24: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    materialStagingData: {
      handler(val) {
        this.getMaterialStagingData()
      },
      deep: true,
    }
  },
  data() {
    return {
      materialStagingData: {},
    };
  },
  computed: {},
  created() { },
  mounted() {
    this.getInitData()
  },
  methods: {
    getMaterialStagingData() {
      for (let key in this.materialStagingData) {
        this.materialStagingData[key] = this.materialStagingData[key] + ''
      }
      this.$emit('getMaterialStagingData', this.materialStagingData)
      console.log(this.materialStagingData)
    },
    clearItemData(item) {
      console.log(item)
      for (let key in item) {
        let propKey = item[key];
        if (key !== 'title') {
          if (key == 'inputNumKey' || key == 'switchKey') {
            this.materialStagingData[propKey] = '0'
          } else {
            this.materialStagingData[propKey] = '00'
          }
        }
      }
    },
    getInitData() {
      let keyList = [];
      this.formConfig.forEach(item => {
        item.materialList.forEach(material => {
          for (let key in material) {
            keyList.push(material[key]);
          };
        });
        if (item.pondKey) keyList.push(item.pondKey);
        if (item.materialKey) keyList.push(item.materialKey);
      });
      keyList.forEach(key => {
        this.$set(this.materialStagingData, key, this.formData[key])
      })
    },
    cancel() {
      this.$emit('cancel')
    }
  }
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  line-height: 28px;
}

.pondConfig {
  background: #d4e6f1;
  padding: 5px 0;
  color: #999999;

  .configItem {
    margin-bottom: 5px;
  }
}

.title {
  width: 120px !important;
  padding: 0 10px;
}

.module {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  line-height: 40px;
  height: 40px;
  transition: all 0.5s;

  &:hover {
    background: #e9f0f5;
  }



  .inputNum {
    width: 15%;
    min-width: 150px;
    padding-right: 10px;
  }

  .setTime {
    display: flex;
    justify-content: flex-start;
    width: 460px;

    ::v-deep .el-select {
      width: 10%;
      min-width: 80px;
    }
  }
}
</style>
